<template>
  <div class="item">
    <div class="imgBox">
      <router-link
        :to="{
          path: `/playList/${item.id}?url=${item.picUrl}&name=${item.name}`
        }"
      >
        <img v-lazy="item.picUrl"
      /></router-link>
      <span>{{ item.playCount | formatNum }}万</span>
    </div>
    <router-link
      :to="{
        path: `/playList/${item.id}?url=${item.picUrl}&name=${item.name}`
      }"
      >{{ item.name }}</router-link
    >
  </div>
</template>

<script>
export default {
  name: "ListItem",
  props: ["item"],

  filters: {
    formatNum(val) {
      return (val / 10000).toFixed(2);
    }
  }
};
</script>

<style lang="less" scoped>
div.item {
  display: flex;
  flex-direction: column;
  .imgBox {
    position: relative;
    span {
      position: absolute;
      right: 10px;
      top: 10px;
      background: url();
      background-repeat: no-repeat;
      background-size: 12px;
      font-size: 12px;
      color: white;
      text-shadow: 0px 0px 2px #000;
      padding-left: 12px;
    }
  }
}

a {
  display: inline-block;
  width: 100%;
  font-size: 13px;
  color: rgb(245, 245, 245);
  text-decoration: none;
  padding: 0px 0px 10px 10px;
}
</style>
